<template>
  <view class="container">
    <NavBar
      :title="NavTitle"
      @clickRightFn="rightTextClick"
      :iconClass="baseFormData.activityStatus == 1?'icon-bianjiwenjian':''"
      centerColor="#fff"
      @rightTextClick="rightTextClick"
      :del="false"
      :rightText="formPage == 'drafts' ? '修改' : ''"
    />

    <view class="container-item">
      <!-- 头部 开始-->
      <view class="item_title" v-if="isTaiZhang">
        <view class="title_right" style="margin-left: 0">
          <view class="theme">{{ baseFormData.activityTheme }}</view>
          <view>
            <text class="type">{{ activityType }}</text>
            <!-- {{baseFormData}} -->
            <text class="item_status" style="background: #0b847b"
              >
              <text v-if="baseFormData.djDeptName">{{baseFormData.djDeptName}}</text>
              <text v-else>{{baseFormData.activityName}}</text>
            </text>
          </view>
        </view>
      </view>
      <view class="item_title" v-else>
        <image
          v-if="baseFormData.coverUrl"
          @click="seePic(baseFormData.coverUrl)"
          :src="baseFormData.coverUrl"
          style="width: 200rpx; height: 132rpx; border-radius: 8rpx"
        ></image>
        <image
          v-else
          @click="seePic(imgSrc)"
          :src="imgSrc"
          style="width: 200rpx; height: 132rpx; border-radius: 8rpx"
        ></image>
        <view class="title_right">
          <view class="theme">{{ baseFormData.activityTheme }}</view>
          <view>
            <text class="type">{{ activityType }}</text>
            <text style="width: 90rpx; height: 32rpx">
              <text
                v-if="baseFormData.activityStatus == 1"
                class="item_status"
                style="background: #0b847b"
                >未开始</text
              >
              <text
                v-if="baseFormData.activityStatus == 2"
                class="item_status"
                style="background: #51bb88"
                >进行中</text
              >
              <text
                v-if="baseFormData.activityStatus == 3"
                class="item_status"
                style="background: #e86565"
                >已结束</text
              >
            </text>
            <text
                v-if="!baseFormData.activityStatus"
                class="item_status"
                style="background: #e86565"
                >未发布</text
              >
          </view>
        </view>
      </view>
      <!-- 头部 结束-->
      <!-- 时间地点人员 -->
      <view class="item_time">
        <!-- 开始时间 -->
        <view class="time">
          <view>
            <image
              src="../../static/dangjian/start_time.png"
              style="width: 30rpx; height: 30rpx"
            ></image>
            <text class="time_name">活动开始时间：</text>
          </view>
          <view class="right_con">
            <text v-if="baseFormData.activityStartTime">{{baseFormData.activityStartTime}}</text>
            <text v-else>暂无</text>
          </view>
        </view>
        <!-- 结束时间 -->
        <view class="time">
          <view>
            <image
              src="../../static/dangjian/end_time.png"
              style="width: 30rpx; height: 30rpx"
            ></image>
            <text class="time_name">活动结束时间：</text>
          </view>
          <view class="right_con">
            <text v-if="baseFormData.activityEndTime">{{baseFormData.activityEndTime}}</text>
            <text v-else>暂无</text>
          </view>
        </view>
        <!-- 活动地点 -->
        <view class="time">
          <view>
            <image
              src="../../static/dangjian/station.png"
              style="width: 30rpx; height: 30rpx"
            ></image>
            <text class="time_name">活动地点：</text>
          </view>
          <view class="right_con">
            {{ activityPlace.length == 0 ? "暂无" : activityPlace }}
          </view>
        </view>
        <!-- 参与人员 -->
        <view class="time" v-if="participant.length">
          <view>
            <image
              src="../../static/dangjian/personnel.png"
              style="width: 30rpx; height: 30rpx"
            ></image>
            <text class="time_name">参与人员：</text>
          </view>
        </view>
        <view class="peo_view right_con" v-if="participant.length">
          <text v-for="(i, index) in participant" :key="index">
            <text style="margin-right: 20rpx">{{ i }}</text>
          </text>
        </view>
      </view>
      <view
        v-if="isTaiZhang"
        :class="['images_con', !coverUrlArr.length ? 'img_con_zanwu' : '']"
      >
        <text stype="font-weight: bold;color: #000">活动照片:</text>
        <view class="images" v-if="coverUrlArr.length">
          <view class="img_item" v-for="(i, index) in coverUrlArr" :key="index">
            <image
              :src="i"
              style="width: 210rpx; height: 210rpx"
              @click="seePic(i)"
            ></image>
          </view>
        </view>
        <view class="" v-else> 暂无 </view>
      </view>
      <!-- 时间地点人员 -->

      <!-- 活动内容 -->
      <view v-if="baseFormData.activityContent">
        <view style="margin-top: 30rpx" class="time_name">活动内容:</view>
        <!-- <view class="activity_content" v-show="!isTaiZhang"> -->
        <view class="activity_content right_con">
          <view>{{ baseFormData.activityContent }}</view>
        </view>
      </view>
      <!-- 活动内容 -->

      <!-- {{baseFormData.accessoryUrl}} -->
      <!-- 附件 1 -->
      <!-- 提交活动上传的附件 -->
      <view v-if="baseFormData.accessoryUrl.length">
        <view style="margin-top: 30rpx" class="time_name">附件:</view>
        <view class="appendix">
          <view class="appendix_con">
            <view
              class="appendix_con_item"
              v-for="(i, index) in baseFormData.accessoryUrl"
              :key="index"
            >
              <text class="name" @click="openFile(i)">{{
                i.accessoryName
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 附件 -->

      <!-- 附件 2 -->
      <!-- --{{ typeof taiZhangUrlArr}}++ -->
      <view class="appendix" v-if="taiZhangUrlArr.length">
        <!-- <view class="appendix_title">
          <i class="iconfont icon-24gf-folderOpen"></i>
          <text class="p-100">附件</text>
        </view> -->
        <view class="appendix_con">
          <view
            class="appendix_con_item"
            v-for="(i, index) in taiZhangUrlArr"
            :key="index"
          >
            <text @click="openFile(i)">{{ i.name }}</text>
          </view>
        </view>
      </view>
      <!-- 附件 -->
    </view>
    <view v-if="!isTaiZhang && formPage != 'drafts'">
      <view style="height: 32rpx; background: #f6f7f9"></view>

      <!-- 判断身份和活动状态显示页面 -->
      <!-- 支部管理员 -->
      <view class="guanliyuan" v-if="identityInfo">
        <!-- 未开始 itemStatus 1 -->
        <view class="guanliyaun_one" v-if="itemStatus == 1">
          <view class="code_img">
            <image
              class="code_pic"
              v-if="baseFormData.qrCodeUrl"
              :src="baseFormData.qrCodeUrl"
            />
          </view>
          <view class="down_code">
            <view @click="dowmloadCode">
              <image
                src="../../static/dangjian/down.png"
                style="width: 34rpx; height: 34rpx"
              ></image>
              <text>下载二维码</text>
            </view>
            <view class="" v-if="baseFormData.activityStatus== 1">
              <text @click="cancelActive"> 撤销活动 </text>
            </view>
          </view>
        </view>
        <!-- 进行中 itemStatus 2 -->
        <view class="guanliyuan_two" v-if="itemStatus == 2">
          <view class="guanliyuan_two_peo">
            <view class="_top">
              <view class="two_peo_top">
                <text @click="toggleCode(0)">已签到人员</text>
                <text @click="toggleCode(1)" style="color: #3b95ff"
                  >签到二维码</text
                >
              </view>
              <view class="two_peo_btm">
                <view class="code_img" v-if="isShowCode">
                  <image
                    class="code_pic"
                    v-if="baseFormData.qrCodeUrl"
                    :src="baseFormData.qrCodeUrl"
                  />
                  <!-- <view v-else style="color: #000">活动已结束,无二维码2</view> -->
                  <!-- 					<view class="dowm_code" @click="dowmloadCode">
										下载二维码
									</view> -->
                </view>
                <view class="people" v-else>
                  <view class="register_people" v-if="peopleInfoArr.length">
                    <view
                      class="peo_item"
                      v-for="(item, index) in peopleInfoArr"
                      :key="index"
                    >
                      <view class="">
                        <image v-if="item.avatar" class="title_img" :src="item.avatar" />
                        <image v-else class="title_img" :src="imgSrc" />
                        <view style="font-size: 20rpx">
                          {{ item.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="right_con" v-else>暂无签到人员</view>
                </view>
              </view>
            </view>
            <!-- 				<button v-if="!isRepeatScan"
							style="width: 662rpx;height: 88rpx;background: #3B95FF;margin-top: 30rpx; color: #fff;"
							@click="scanCode">现场扫码签到</button> -->
          </view>
        </view>
        <!-- 已结束 itemStatus 3-->
        <view class="guanliyuan_two" v-if="itemStatus == 3 && !isTaiZhang">
          <view class="guanliyuan_two_peo">
            <view class="_top">
              <view class="two_peo_top">
                <text @click="toggleCode(0)">已签到人员</text>
                <text @click="toggleCode(1)" style="color: #0b847b"
                  >签到二维码</text
                >
              </view>
              <view class="two_peo_btm">
                <view class="code_img" v-if="isShowCode">
                  <image
                    class="code_pic"
                    v-if="baseFormData.qrCodeUrl"
                    :src="baseFormData.qrCodeUrl"
                  />
                  <!-- <view v-else style="color: #999">活动已结束,无二维码</view> -->
                  <!-- 			<view class="dowm_code" @click="dowmloadCode">
										下载二维码
									</view> -->
                </view>
                <view class="people" v-else>
                  <view class="register_people" v-if="peopleInfoArr.length">
                    <view
                      class="peo_item"
                      v-for="(item, index) in peopleInfoArr"
                      :key="index"
                    >
                      <view class="">
                        <image v-if="item.avatar" class="title_img" :src="item.avatar" />
                        <image v-else class="title_img" :src="imgSrc" />
                        <view style="font-size: 20rpx">
                          {{ item.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="right_con" v-else>暂无签到人员</view>
                </view>
              </view>
            </view>

            <view class="taizhang_file">
              <view>附件</view>
              <lsj-upload
                style="
                  width: 100rpx;
                  height: 50rpx;
                  line-height: 50rpx;
                  text-align: right;
                  color: #0b847b;
                "
                ref="lsjUpload"
                childId="upload1"
                :size="uploadconfig2.size"
                :instantly="uploadconfig2.instantly"
                :formats="uploadconfig2.formats"
                :option="option"
                @change="onChange"
                @uploadEnd="onuploadEnd"
                @fail="failFile"
              >
                <i class="iconfont icon-24gf-folderOpen"></i>
                <text style="font-size: 28rpx">上传</text>
              </lsj-upload>
            </view>
            <view v-if="urlArr.length" style="width: 600rpx">
              <!-- <view v-for="(i, index) in urlArr" :key="index" class="file_item">
                <text class="appendix_con">
                  <text class="name"> {{ i.name }} </text>
                  <i
                    class="iconfont icon-close"
                    @click="delUploadFile(i)"
                  ></i>
                </text>
              </view> -->
              <view class="file_list" style="width: 660rpx" v-for="(item, index) in urlArr" :key="index" >
              <view @click="prevFileClick(item)" class="file_list_item">
                <view>
                  <i
                    class="iconfont icon-24gf-folderOpen"
                    style="color: #0b847b"
                  ></i>
                  {{ item.name }}</view
                >
              </view>
              <view
                class="iconfont icon-close"
                @click="delUploadFile(index)"
              ></view>
            </view>
            </view>

            <button
              type="primary"
              @click="uploadAccount"
              :disabled="!urlArr.length"
              class="btn_upload_account"
            >
              上传活动台账
            </button>
          </view>
        </view>
      </view>

      <!-- 党员 -->
      <view class="dangyuan code" v-if="!identityInfo">
        <view class="" v-if="itemStatus == 2">
          <view class="guanliyuan_two guanliyuan_two_peo">
            <view class="_top">
              <view class="two_peo_top" @click="toggleCode(0)">
                <text>已签到人员</text>
              </view>
              <view class="two_peo_btm">
                <view class="code_img" v-if="isShowCode">
                  <image
                    class="code_pic"
                    v-if="baseFormData.qrCodeUrl"
                    :src="baseFormData.qrCodeUrl"
                  />
                  <!-- <view v-else style="color: #000">活动已结束,无二维码2</view> -->
                </view>
                <view class="people" v-else>
                  <view class="register_people" v-if="peopleInfoArr.length">
                    <view
                      class="peo_item"
                      v-for="(item, index) in peopleInfoArr"
                      :key="index"
                    >
                      <view class="">
                        <image v-if="item.avatar" class="title_img" :src="item.avatar" />
                        <image v-else class="title_img" :src="imgSrc" />
                        <view style="font-size: 20rpx">
                          {{ item.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="right_con" v-else>暂无签到人员</view>
                </view>
              </view>
            </view>
            <button
              v-if="!isRepeatScan"
              style="
                width: 662rpx;
                height: 88rpx;
                background: #0b847b;
                margin-top: 30rpx;
                color: #fff;
              "
              @click="scanCode"
            >
              现场扫码签到
            </button>
          </view>
        </view>

        <view class="" v-if="itemStatus == 3">
          <view class="guanliyuan_two guanliyuan_two_peo">
            <view class="_top">
              <view class="two_peo_top" @click="toggleCode(0)">
                <text>已签到人员</text>
              </view>
              <view class="two_peo_btm">
                <view class="code_img" v-if="isShowCode">
                  <image
                    class="code_pic"
                    v-if="baseFormData.qrCodeUrl"
                    :src="baseFormData.qrCodeUrl"
                  />
                  <!-- <view v-else style="color: #999">活动已结束,无二维码</view> -->
                </view>
                <view class="people" v-else>
                  <view class="register_people" v-if="peopleInfoArr.length">
                    <view
                      class="peo_item"
                      v-for="(item, index) in peopleInfoArr"
                      :key="index"
                    >
                      <view class="">
                        <image v-if="item.avatar" class="title_img" :src="item.avatar" />
                        <image v-else class="title_img" :src="imgSrc" />
                        <view style="font-size: 20rpx">
                          {{ item.name }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="right_con" v-else>暂无签到人员</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  apiQrCodeSign, //扫码签到
  apiQrCodeSignList, //参与人员列表
  apiRevocAtion, // 撤销活动
  apiuploadAccount, // 上传活动台账
  apiActivityList, // 活动列表
  apiHuoDongTongZhi, // 19 党群活动通知 / status 0未读 2已读 /  uid
} from "../../net/dagnqunhuodong.js";
import NavBar from "@/components/NavBar.vue";
import {
  prevFile, // 预览普通文件
} from "../../utils/preview.js";

import { uploadconfig2 } from "../../const";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      uploadconfig2,
      option: {
        url: uploadconfig2.url,
        name: "file",
        header: {
          Authorization: uni.getStorageSync("token"), platform: 'APP'
        },
        formData: {},
      },
      taiZhangUrlArr: [], //台账上传的附件地址
      isRepeatScan: false, //重复扫描？
      participant: [],
      coverUrlArr: [],
      NavTitle: "",
      isTaiZhang: false,
      uploadDis: false,
      formPage: "", //来自哪个页面
      peopleInfoArr: [],
      imgSrc: "../../static/dangjian/no-pic.png",
      isShowCode: false,
      itemStatus: 1,
      activityType: "",
      activityPlace: "",
      // isFlag: true,
      disabledDraft: false,
      draftLoading: false,
      disabledPublish: false,
      publishLoading: false,
      tabIndex: 0,
      // 文件回显列表
      files: new Map(),
      // 参与人员
      personnelArr: [],

      typeClassArr: [],
      baseFormData: {},
      identityInfo: true, //判断身份信息
      urlArr: [],
    };
  },
  onLoad(options) {
    // 获取当前登录人身份信息
    let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
    if (permission.indexOf("common") > -1) {
      this.identityInfo = false;
    }
    if (
      permission.indexOf("admin") > -1 ||
      permission.indexOf("superAdmin") > -1
    ) {
      this.identityInfo = true;
    }

    this.NavTitle = "活动详情";
    console.log(options);

    let resData = {};
    if (options.id) {
      let data = {};

      apiActivityList(data)
        .then((res) => {
          console.log(res);
          if (res.code == 0 && res.data.length) {
            for (let i = 0; i < res.data.length; i++) {
              console.log(res.data[i].dqActivityId, options.id);
              if (res.data[i].dqActivityId == options.id) {
                console.log(res.data[i]);
                resData = res.data[i];
                resData.from = options.from;
                uni.setStorageSync("itemParams", JSON.stringify(resData));
                // uni.setStorageSync('itemParams', JSON.stringify(res.data[i]))
                this.onloadOption(resData);
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }

    // 判断url中是否有参数
    console.log(resData);
    if (uni.getStorageSync("itemParams") && JSON.stringify(resData) == "{}") {
      console.log(options);
      console.log(uni.getStorageSync("itemParams"));
      let dataObj = JSON.parse(uni.getStorageSync("itemParams"));
      dataObj.from = options.from;
      this.onloadOption(dataObj);
    }
  },
  methods: {
        // 预览上传的文件
    prevFileClick(item) {
      prevFile(item);
    },
    // 上传文件
    // 删除文件
    delUploadFile(item) {
      console.log(item);
      this.urlArr.splice(item, 1);
      console.log(this.urlArr);
      // that.urlArr = arr;
      // that.baseFormData.url = arr;
    },
    // 选择文件触发，返回所有已选择文件Map集合
    onChange(files) {
      uni.showLoading({
        title: "上传中……",
      });
      console.log(files);
      this.files = files;
      this.$forceUpdate();
    },

    // 上传结束回调，返回参数与progress一致
    onuploadEnd(item) {
      let arr = [];
      let that = this;
      uni.hideLoading();
      let res = JSON.parse(item.responseText);
      console.log(res);

      if (res.code == 0) {
        that.urlArr.push({
          url: res.data.url,
          name: res.data.fileName,
        });
      }

      // 强制更新视图
      that.$forceUpdate();
    },

    onloadOption(options) {
      if (options.from == "taiZhang") {
        this.isTaiZhang = true;
        this.NavTitle = "活动台账详情";
        let coverUrl = JSON.parse(options.coverUrl); //上传的图片
        console.log(typeof coverUrl, "options.coverUrl");
        if (typeof coverUrl == "string") {
          this.coverUrlArr.push(coverUrl);
        } else {
          this.coverUrlArr = coverUrl;
        }
      }

      // this.isFlag = dataObj.flag;
      this.formPage = options.formPage;
      console.log(options.qrCodeUrl,'');
      this.baseFormData = options;

      // 附件
      this.baseFormData.accessoryUrl = JSON.parse(options.accessoryUrl);

      // 活动台账上传的附件
      console.log(options.url);
      if (options.url != undefined) {
        this.taiZhangUrlArr = JSON.parse(options.url);
      } else {
        this.taiZhangUrlArr = [];
      }
      console.log(this.taiZhangUrlArr.length, "this.taiZhangUrlArr");

      // 活动照片
      if (typeof options.coverUrl == "string") {
        if (JSON.parse(options.coverUrl).length) {
          this.baseFormData.coverUrl = JSON.parse(options.coverUrl)[0];
        } else {
          this.baseFormData.coverUrl = this.imgSrc;
        }
      } else {
        if (options.coverUrl.length) {
          this.baseFormData.coverUrl = options.coverUrl[0];
        } else {
          this.baseFormData.coverUrl = this.imgSrc;
        }
      }

      // 参与人员名称
      let arr = JSON.parse(options.participant);
      this.participant = arr.map((v) => {
        return v.name;
      });

      // 活动类型
      let typeClassArr = JSON.parse(uni.getStorageSync("typeClassArr"));
      this.activityType = typeClassArr[this.baseFormData.activityType - 1].name;

      // 活动地点
      if (this.baseFormData.activityPlace) {
        this.activityPlace = "";
      }
      if (
        typeof this.baseFormData.activityPlace == "string" &&
        !Number(this.baseFormData.activityPlace)
      ) {
        this.activityPlace = this.baseFormData.activityPlace;
      }
      let activityPlaceArr = JSON.parse(uni.getStorageSync("activityPlaceArr"));
      if (
        typeof this.baseFormData.activityPlace == "string" &&
        Number(this.baseFormData.activityPlace)
      ) {
        for (let i = 0; i < activityPlaceArr.length; i++) {
          if (this.baseFormData.activityPlace == activityPlaceArr[i].value) {
            this.activityPlace = activityPlaceArr[i].text;
          }
        }
      }

      console.log(!this.isTaiZhang);

      if (!this.isTaiZhang) {
        if (this.baseFormData.activityStatus == 1) {
          return;
        }
        if (this.baseFormData.activityStatus == 3) {
          this.getJoinPeoList();
          return;
        }
        if (this.baseFormData.activityStatus == 2) {
          this.getJoinPeoList();
          return;
        }
      }
    },

    // 上传活动台账
    uploadAccount() {
      console.log(this.urlArr);
      let baseFormData = {
        dqActivityId: this.baseFormData.dqActivityId,
        activityTheme: this.baseFormData.activityTheme,
        activityType: this.baseFormData.activityType,
        activityStartTime: this.baseFormData.activityStartTime,
        activityEndTime: this.baseFormData.activityEndTime,
        participant: this.baseFormData.participant,
        activityContent: this.baseFormData.activityContent,
        coverUrl: JSON.stringify(this.baseFormData.coverUrl),
        accessoryUrl: JSON.stringify(this.baseFormData.accessoryUrl),
        activityPlace: this.baseFormData.activityPlace,
        url: JSON.stringify(this.urlArr),
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
      };

      apiuploadAccount(baseFormData)
        .then((res) => {
          console.log(res);
          if (res.code === 0) {
            uni.showToast({
              icon: "success",
              title: "上传成功",
              mask: true,
              success: () => {
                uni.navigateBack({
                  delta: 1,
                });
              },
            });
          } else {
            uni.showToast({
              icon: "error",
              title: "上传失败",
              mask: true,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 跳转到修改页面
    rightTextClick() {
      uni.navigateTo({
        url: "../DJinitiateActivities/index",
      });
    },

    // 撤销活动
    cancelActive() {
      apiRevocAtion(JSON.parse(uni.getStorageSync("itemParams")).dqActivityId)
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            uni.showToast({
              title: "操作成功",
              icon: "success",
              duration: 2000,
            });
            let data = {
              status: 0,
              uid: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
            };
            apiHuoDongTongZhi(data);
            uni.navigateBack({
              delta: 1,
            });
          } else {
            uni.showToast({
              title: "操作失败",
              icon: "error",
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "操作失败",
            icon: "error",
            duration: 2000,
          });
        });
    },

    // 获取参与人员列表
    getJoinPeoList() {
      let loginUser = JSON.parse(uni.getStorageSync("loginUserInfo"));
      console.log(uni.getStorageSync("itemParams"));
      // console.log(JSON.parse(uni.getStorageSync('itemParams')).dqActivityId);
      let dqActivityId = JSON.parse(
        uni.getStorageSync("itemParams")
      ).dqActivityId;

      apiQrCodeSignList(dqActivityId)
        .then((res) => {
          if (res.code === 0) {
            console.log(res.data);
            this.peopleInfoArr = res.data;

            // 判断登录人是否已经扫描过
            for (let i = 0; i < res.data.length; i++) {
              console.log(loginUser.uid, res.data[i].uid);
              if (loginUser.uid == res.data[i].uid) {
                this.isRepeatScan = true;
              }
            }
          } else {
            this.peopleInfoArr = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.peopleInfoArr = [];
        });
    },

    // 扫码签到 只允许通过相机扫码
    scanCode() {
      let that = this;
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          let userInfo = uni.getStorageSync("loginUserInfo");

          let params = {
            dqActivityId: JSON.parse(res.result).id,
            id: JSON.parse(userInfo).djUserId,
          };

          apiQrCodeSign(params)
            .then((res) => {
              if (res.code === 0) {
                uni.showToast({
                  title: "扫描成功",
                  icon: "success",
                  duration: 2000,
                });
              } else {
                uni.showToast({
                  title: "扫描失败",
                  icon: "error",
                  mask: true,
                  duration: 1500,
                });
              }
              that.getJoinPeoList();
            })
            .catch((err) => {
              console.log(err);
              if (err.code == 500) {
                uni.showToast({
                  title: "非活动的参与者",
                  icon: "error",
                  mask: true,
                  duration: 1500,
                });
              }
            });
        },
      });
    },

    isAssetTypeAnImage(ext) {
      return (
        [
          "png",
          "jpg",
          "jpeg",
          "bmp",
          "gif",
          "webp",
          "psd",
          "svg",
          "tiff",
          "docx",
          "pdf",
          "mp4",
          "mp3",
        ].indexOf(ext.toLowerCase()) !== -1
      );
    },

    // 预览文件
    previewAll(res) {
      let url = res.savedFilePath;
      if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(url)) {
        //图片预览
        uni.previewImage({
          urls: [url],
          longPressActions: {
            itemList: ["发送给朋友", "保存图片", "收藏"],
            success: function (data) {},
            fail: function (err) {
              console.log(err.errMsg);
            },
          },
        });
      } else {
        //文件预览
        uni.openDocument({
          showMenu: true,
          filePath: url,
          success: function (res) {
            console.log("打开文档成功");
          },
          fail: (err) => {
            uni.showToast({
              title: "打开文件失败请重试",
              icon: "none",
            });
          },
        });
      }
    },

    // 文件预览
    openFile(i) {
      prevFile(i);
    },

    downLoadImg() {
      //下载图片资源至本地，返回文件的本地临时路径
      uni.downloadFile({
        url: this.baseFormData.qrCodeUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            //保存图片至相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function () {
                uni.showToast({
                  title: "保存成功",
                  icon: "none",
                });
              },
              fail: function () {
                uni.showToast({
                  title: "保存失败，请稍后重试",
                  icon: "none",
                });
              },
            });
          }
        },
      });
    },
    // 下载二维码
    dowmloadCode() {
      let that = this;
      that.downLoadImg();
      // 向用户发起授权请求
      uni.authorize({
        scope: "scope.writePhotosAlbum",
        success: () => {
          // 已授权
          that.downLoadImg();
        },
        fail: () => {
          // 拒绝授权，获取当前设置
          uni.getSetting({
            success: (result) => {
              if (!result.authSetting["scope.writePhotosAlbum"]) {
                that.isAuth();
              }
            },
          });
        },
      });
    },

    // 切换签到二维码
    toggleCode(i) {
      console.log(i);
      this.isShowCode = i == 1 ? true : false;
      if (!i) {
        this.getJoinPeoList();
      }
    },
    // 图片预览
    seePic(url) {
      console.log(url);
      let urls = [url];
      uni.previewImage({
        urls,
        itemList: ["保存图片"],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "/static/dangjian.scss";
page {
  background: #f9f9f9;
  font-size: 28rpx;
  color: #4e5356;
}

.p-100 {
  padding: 0 30rpx;
  margin: 10rpx 0;
  box-sizing: border-box;
}

.info_page_bg {
  position: absolute;
  top: 0;
}

.container {
  height: 100%;
  background: url("../../static/dangjian/info_page_bg.png") no-repeat;
  background-size: 100%;
  padding-top: 10rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.code_pic {
  width: 200rpx;
  height: 200rpx;
}

.container-item {
  background: #fff;
  padding: 40rpx 20rpx;
  box-sizing: border-box;
  width: 700rpx;
  margin: 0 auto;
  margin-bottom: 20rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  overflow: hidden;
}

.code {
  width: 100%;
  min-height: 360rpx;
  text-align: center;
  position: relative;
}

.cancel {
  color: #a8a8a8;
  position: absolute;
  top: 26rpx;
  right: 40rpx;
}

.people {
  color: #999 !important;
  text-align: center;
}

.register_people {
  height: 280rpx;
  overflow-y: scroll;
  width: 100%;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.peo_item {
  width: 20%;
  text-align: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #0e1634;
}

.guanliyuan {
  background: #f9f9f9;
}

/* 管理员-未开始  1*/
.guanliyaun_one,
.guanliyuan_two {
  width: 702rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
  padding: 20rpx;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  font-size: 30rpx;
  color: #ffffff;
  border-radius: 8rpx;
}

.guanliyaun_one .code_img {
  width: 662rpx;
  height: 300rpx;
  background: #e7f2ff;
  border-radius: 8rpx;
}

.guanliyaun_one .down_code {
  width: 662rpx;
  height: 80rpx;
  background: #0b847b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 10rpx;
}

.guanliyaun_one .down_code view {
  display: flex;
  align-items: center;
}

.guanliyaun_one .code_img image {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

/* 管理员-未开始  2*/

/* 管理员 - 进行中 1 */

.guanliyuan_two_peo ._top {
  width: 662rpx;
  height: 360rpx;
  background: #e7f2ff;
}

.guanliyuan_two_peo ._top .two_peo_top {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  color: #000;
}

.guanliyuan_two_peo ._top .two_peo_btm {
  height: 280rpx;
  overflow: scroll;
  position: relative;
}

.guanliyuan_two_peo ._top .two_peo_btm .code_img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 管理员 - 进行中 2 */

.guanliyuan_two_btn {
  height: 150rpx;
  position: relative;
}

.guanliyuan_two_btn view {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 300rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #0b847b;
  color: #fff;
  border-radius: 6rpx;
}

.title_img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 8rpx;
  border: 1px solid #ccc;
}

/* 视频位置 */
.video {
  width: 100% !important;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  right: 0;
}

.icon-guanbi {
  font-size: 50rpx;
  color: #fff;
  position: absolute;
  z-index: 10;
  top: 10rpx;
  right: 46rpx;
}

.my-Video {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  width: 90%;
}

/* 上传台账 */
.upload_account {
  color: #fff;
  padding: 8rpx;
}

.item_status {
  border-radius: 8rpx;
  overflow: hidden;
  font-size: 22rpx;
  color: #fff;
  padding: 2rpx 6rpx;
}

.btn_upload_account {
  width: 662rpx;
  height: 88rpx;
  line-height: 88rpx;
  margin: 0 auto;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 8rpx;
  background: #0b847b;
  font-size: 30rpx;
}

/* 头部 开始 */
.item_title {
  display: flex;
}

.item_title .title_right {
  margin-left: 40rpx;
}

.item_title .theme {
  font-size: 34rpx;
  font-weight: bold;
  color: #0e1634;
  line-height: 38rpx;
}

.item_title .type {
  font-size: 24rpx;
  font-weight: 500;
  color: #000000;
  line-height: 28rpx;
  margin-right: 20rpx;
}

/* 头部 结束 */

/* 时间地点人员 1 */
.item_time {
  width: 100%;
}

.item_time .time {
  height: 84rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item_time .time image {
  margin-right: 20rpx;
}

.item_time .time text {
  color: #999999;
  font-size: 30rpx;
}

.item_time .peo_view {
  width: 662rpx;
  min-height: 100rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 2rpx solid #d6dbe3;
  padding: 20rpx 28rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #0e1634;
}

/* 时间地点人员 2 */
/* 活动内容 1 */
.activity_content {
  width: 662rpx;
  min-height: 180rpx;
  /* max-height: 576rpx; */
  background: #f3f5f8;
  border-radius: 8rpx;
  opacity: 1;
  border: 2rpx solid #d6dbe3;
  margin-top: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 活动内容 2 */

/* 附件 1  提交活动上传的附件 */
.appendix {
  margin-top: 20rpx;
  width: 662rpx;
  min-height: 120rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1rpx solid #d6dbe3;
  color: #0b847b;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .appendix_con_item {
    margin: 10rpx 0;
    font-size: 28rpx;
    .name {
      display: inline-block;
      width: 600rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.appendix .file_item {
  height: 60rpx;
  padding: 10rpx 0;
  border-radius: 8rpx;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}
.appendix2 {
  // width: 662rpx;
  background: #f3f5f8;
  border-radius: 8rpx;
  border: 1rpx solid #d6dbe3;
  color: #0b847b;
  padding: 0 10rpx;
  box-sizing: border-box;
  .appendix_con {
    display: flex;
    width: 662rpx;
    .name {
      width: 100% !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.appendix2 .file_item {
  width: 98%;
  margin: 10rpx 0;
  height: 60rpx;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}

.appendix_con {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* 附件 2 */

/* 台账详情显示的图片 1 */
.images_con {
  margin: 8rpx 0;
  font-size: 30rpx;
  font-weight: 500;
  color: #666666;
}

.img_con_zanwu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.images_con text {
  display: inline-block;
  margin: 30rpx 0;
}

.images {
  width: 660rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.images .img_item image {
  border-radius: 8rpx;
  margin-right: 10rpx;
}

/* 台账详情显示的图片 2 */

/* 附件 1 */

/* 附件 2 */

/* 上传活动台账附件 */
.taizhang_file {
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dowm_code {
  color: #3b95ff;
}

.time_name {
  font-size: 32rpx !important;
  color: #000 !important;
}

.right_con {
  color: #999 !important;
  font-size: 28rpx;
}
</style>
